<script>
  let widget;

  const onkeydown = (ev) => {
    // TODO: maybe there's a better way to change focus?
    if (ev.key === 'ArrowUp') {
      for (let child of widget.children) {
        if (document.activeElement === child) {
          let el = child;
          // we have to skip comment elements inserted by svelte
          while (el = el.previousSibling) {
            // UGH, this depends on Stat being div
            if (el.nodeName.toLowerCase() === 'div') {
              el.focus();
              break;
            }
          }
          break;
        }
      }
    } else if (ev.key === 'ArrowDown') {
      for (let child of widget.children) {
        if (document.activeElement === child) {
          let el = child;
          // we have to skip comment elements inserted by svelte
          while (el = el.nextSibling) {
            // UGH, this depends on Stat being div
            if (el.nodeName.toLowerCase() === 'div') {
              el.focus();
              break;
            }
          }
          break;
        }
      }
    }
  };
</script>

<div {onkeydown} bind:this={widget}>
  <slot/>
</div>
